<%= include ic/header.html %>
<style>
#nav_trip{color:#fff;}
#main{text-align:center;padding-bottom:3rem;}

#detail{float:left;background:#fff;text-align:left;position:relative;}
#ctrlBar{width:100%;height:60px;font-size:30px;line-height:60px;border-bottom:1px solid #ccc;overflow:hidden;}
#ctrlBar div{width:90px;height:100%;float:right;text-align:center;margin-top:0;}
#ctrlBar div a{padding:0 10px;color:#ccc;}
#ctrlBar div a:hover{color:#111;}
#datail-hd{border-bottom:1px solid #ccc;height:80px;overflow:hidden;}
#datail-hd .am-comment-avatar{margin:10px 8px 0 18px;}
#datail-hd .am-u-md-10 .am-fl{color:#999;line-height:24px;font-size:16px;text-align:left;}
#datail-hd .am-u-md-10 .hd{white-space:nowrap;color:#111;font-size:18px;font-weight:800;}
#datail-hd .am-u-md-1{line-height:80px;}
#datail-hd font{color:#aaa;}
#datail-text{padding:10px 24px;border-bottom:1px solid #ccc;overflow:hidden;word-wrap:break-word;}
#datail-images{width:100%;height:auto;}
#datail-images .li{position:relative;}
#datail-images .li .ctrl{position:absolute;top:0px;right:-1px;height:50px;font-size:24px;line-height:50px;overflow:hidden;display:none;}
#datail-images .li .ctrl div{width:70px;float:right;background:rgba(0,0,0,0.7);margin-right:1px;text-align:center;}
#datail-images .li .ctrl a{color:#eee;padding:0 10px;}
#datail-images .li:hover .ctrl{display:block}
#datail-images .btnEdit{position:absolute;top:5px;right:10px;font-size:20px;}

#datail-images img{width:100%;max-width:1200px;margin:auto;}
#datail-images .note{padding:10px 24px;overflow:hidden;word-wrap:break-word;background:#292929;color:#ddd;position:relative;}
#datail-conclusion{padding:10px 24px;color:#111;font-weight:800px;margin-top:10px;background:#fff;text-align:left;word-wrap:break-word;position:relative;}
#datail-conclusion .btnEdit{position:absolute;top:5px;right:10px;}
#btnSubmit{width:25%;background:#292929;border:1px solid #111;margin:40px auto 5px;border-radius:10px;color:#eee;font-size:24px;padding:5px;cursor:pointer;}
#my-prompt2{padding:15px 0;background:#151515;border-radius:15px;}
.am-modal-bd{padding:0;border-bottom:none;background:#151515;}
.am-modal-bd label{width:100%;padding:10px;text-align:left;margin:5px;font-weight:400;color:#ddd;font-size:1.6rem;}
.am-modal-prompt-input{width:100%;border:none;background:#292929;padding:10px;}
.am-modal-bd+.am-modal-bd{margin-top:0;}
.am-modal-footer{background:#151515;}
.am-modal-footer .am-btn{width:30%;border:1px solid #ddd;margin:20px 15px 5px;border-radius:10px;color:#ddd;}
@media only screen and (min-width: 641px){
#datail-hd font.am-show-md-down{display:inline!important;}
}

</style>
<div id="main">
  <div id="btnBack" class="ml15"><a href="javascript:history.go(-1);"><i class="am-icon-caret-left"></i> BACK</a></div>
  <div class="am-cf"></div>
  <div id="detail"  class="ml15">
    <div id="datail-hd" class="am-g">
      <div class="am-u-sm-12 am-u-md-10 am-padding-xs"><div class="am-fl"><img src="<% if(result.get('user') && result.get('user').get('avatar')){ %><%= result.get('user').get('avatar').thumbnailURL(100, 200) %><% }else{ %>/i/default_avatar.png<% } %>" class="am-comment-avatar" /></div>
      <div class="am-fl" style="padding:10px;max-width: 570px;text-overflow:ellipsis;overflow:hidden;"><font class="hd"><%= result.get('title') %></font><br/>by <%= result.get('user').get("displayName") %></div></div>
      <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-eye"></i> <%= result.get('clicks') %></div>
      <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-heart-o"></i> <%= result.get('likes') %></div>
    </div>
    <% if(user){ %>
    <div id="ctrlBar">
      <div id="btnShare"><a href="javascript:$('#shareBg').toggle()"><i class="am-icon-share-alt"></i></a></div>
      <div id="btnLike"><a href="javascript:toggleFav()"><i class="am-icon-heart-o"></i></a></div>
      <% if(user.id==result.get("user").id || user.get("adminRole")=="admin"){ %><div id="btnDel"><a href="javascript:deleteTrip()"><i class="am-icon-trash-o"></i></a></div><% } %>
    </div>
    <div id="shareBg" style="bottom:90px;">
      <div class="-mob-share-weibo"></div>
      <div class="-mob-share-weixin"></div>
      <div class="-mob-share-facebook"></div>
      <div class="-mob-share-twitter"></div>
      <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=18d4e86772598"></script>
      <!--MOB SHARE END-->
    </div>
    <% } %>
    <div id="datail-text"><%= result.get('detail') %></div>
    <div id="datail-ctrl"></div>
    <div id="datail-images">
      <% for(var i=0;i<tripNoteArr.length;i++){ %>
      <div class="li" id="<%= tripNoteArr[i].id %>">
        <div class="img"><img src="/p?id=<%= tripNoteArr[i].img %>&w=1200&h=3600" /></div>
        <div class="note">
          Note:<font><%= tripNoteArr[i].text %></font>
          <% if(result.get("isDraft")){ %>
          <div class="btnEdit"><a href="javascript:void(0)" onclick="editTripNote(this)"><i class="am-icon-edit"></i></a></div>
          <% } %>
        </div>
        <% if(result.get("isDraft")){ %>
        <div class="ctrl">
          <div class="btnDel"><a href="javascript:void(0)" onclick="removeTripNote(this)"><i class="am-icon-close"></i></a></div>
          <div class="btnUp"><a href="javascript:void(0)" onclick="upTripNote(this)"><i class="am-icon-arrow-up"></i></a></div>
        </div>
        <% } %>
      </div>
      <% } %>
    </div>
  </div>
  <div class="am-cf"></div>
  <div id="datail-conclusion" class="ml15"><b>Conclusion:</b><font><%= result.get('conclusion') %></font></div>
  <div class="am-cf"></div>
  <% if(result.get("isDraft")==false){ %>
  <div id="comments" class="am-margin-top ml15" ><ul></ul></div>
  <div class="am-cf"></div>
  <% if(user){ %>
  <div id="mycomment" class="am-margin-top ml15 am-hide-md-down">
    <input max-length="240" class="am-padding-xs" type="text" name="keyword" value="" placeholder="" />
    <div class="am-btn-sm" onclick="submitComment()">Comment</div>
  </div>
  <% } %>
  <% }else{ %>
    <div id="btnSubmit" class="am-btn-sm" onclick="submit()">Submit</div>
  <% } %>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt2">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      <label>Note:</label>
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-footer">
      <span class="am-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-btn" data-am-modal-confirm>Done</span>
    </div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
var act="add",islocked=true,ids=[],noteid;
$(function() {
  $('#shareBg').hide();
  $("#comments").load("../comment/list", {ajax:true,type:"trip",id:"<%= result.id %>"});
  checkFav();
});

function removeTripNote(obj){
  var o=$(obj).parents(".li");
  //console.log($(o));
  ids.push($(o).attr("id"));
  $(o).remove();
}

function upTripNote(obj){
  var o=$(obj).parents(".li");
  $(o).insertBefore($(o).prev());
}

function editTripNote(obj){
  var o=$(obj).parents(".li");
  noteid=$(obj).parents(".li").attr("id");
  var text=$("#"+noteid+" .note font").text();
  $('#my-prompt2 input').val(text);
  $('#my-prompt2').modal({
      relatedTarget: this,
      onConfirm: function(e){
        text=$.trim(e.data);
        //console.log(text);
        $("#"+noteid+" .note font").text(text);
        $('#my-prompt2').modal('close');
      },
      onCancel: function(e) {$('#my-prompt2').modal('close');}
  });
}

function submitComment(){
  var content = $.trim($("#mycomment input").val());
  if(content.length<10){
    mAlert({
      title:"Warn!",
      text:"You must input 10 letter at least！",
      onConfirm:function(e) {}
    });
  }else{
    $loading.modal('open');
    $.post("/my/sendcommtent", {
      "ajax"			: true,
      "content"		: content,
      "id"		    : "<%= result.id %>",
      "type"		  : "trip"
    },function(data){
      $loading.modal('close');
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        $("#comments ul").load("../comment/list", {ajax:true,type:"trip",id:"<%= result.id %>"});
      }else{
        //console.dir(data);
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  }
}

function submit(){
  $loading.modal('open');
  $.post("/my/tripnote/delete", {
    "ajax"	: true,
    "ids"   : ids
  },function(data){}, "json");
  var sort=1;
  $("#datail-images .li").map(function() {
    var id = $(this).attr("id");
    $.post("/my/tripnote/edit", {
      "ajax"	: true,
      "id"    : id,
      "text"  : $(this).children(".note").children("font").text(),
      "sort"  : sort
    },function(data){}, "json");
    sort++;
  });

  $.post("/my/trip/edit?id=<%= result.id %>", {
    "ajax"			: true
  },function(data){
    $loading.modal('close');
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      mAlert({
        title:"Alert",
        text:"Success!",
        onConfirm:function(e) {gotoUrl("/trip/detail?id=<%= result.id %>");}
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"Error",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

function deleteTrip(){
  var $Confirm = $("#my-confirm");
  var $confirmBtn = $Confirm.find('[data-am-modal-confirm]');
  $confirmBtn.one('click', function() {
    $loading.modal('open');
    $.post("/my/trip/delete?id=<%= result.id %>", {
      "ajax"			: true
    },function(data){
      $loading.modal('close');
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        mAlert({
          title:"Alert",
          text:"Success!",
          onConfirm:function(e) {gotoUrl("/trip");}
        });
      }else{
        //console.dir(data);
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  });

  $Confirm.find(".text").text("Are you sure to delete this trip？");
  if($Confirm.is(".am-modal-out")){
    $Confirm.modal('open');
  }else{
    $Confirm.modal({relatedTarget: this});
  }
}

function toggleFav(){
  if(!islocked){
    islocked=true;
    $.post("/my/togglefav", {
      "ajax"	: true,
      "id"		: "<%= result.id %>",
      "type"  : "trip",
      "act"   : act
    },function(data){
      if(typeof(data)=="object" && typeof(data.error)=="undefined"){
        checkFav();
      }else{
        islocked=false;
        mAlert({
          title:"Error",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  }
}

function checkFav(){
  $.post("/my/checkfav", {
    "ajax"	: true,
    "id"		: "<%= result.id %>",
    "type"  : "trip"
  },function(data){
    islocked=false;
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      if(data.success){
        act="del";
        $("#btnLike a").css("color","#e00");
        $("#btnLike a i").attr("class","am-icon-heart");
      }else{
        act="add";
        $("#btnLike a").css("color","#ccc");
        $("#btnLike a i").attr("class","am-icon-heart-o");
      }
    }else{
      console.error(data.error);
    }
  }, "json");
}
</script>
